<template>
  <div class="home">
    <transition name="van-fade">
      <div v-show="opacity < 0.65" class="bg"></div>
    </transition>

    <div class="content">
      <div class="search-box u-flex-bet" @click="search">
        <div class="logo">
          <img src="@/assets/images/index/font_zblm@2x.png" />
        </div>

        <div class="input-box u-flex">
          <img src="@/assets/images/index/home_icon_sreach@2x.png" />
          <div class="input">请输入关键词</div>
        </div>
      </div>

      <div class="banner-box">
        <van-swipe class="swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="@/assets/images/index/home_banner@2x.png" />
          </van-swipe-item>

          <van-swipe-item>
            <img src="@/assets/images/index/0751@2x.png" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="icon-box u-flex">
        <div class="icon" @click="goList(4)">
          <img src="../../assets/images/index/icon_1@2x.png" />
          <div class="name">游戏</div>
        </div>

        <div class="icon" @click="goList(23)">
          <img src="../../assets/images/index/icon_2@2x.png" />
          <div class="name">转发</div>
        </div>

        <div class="icon" @click="goList(24)">
          <img src="../../assets/images/index/icon_3@2x.png" />
          <div class="name">点赞</div>
        </div>

        <div class="icon" @click="goList(22)">
          <img src="../../assets/images/index/icon_4@2x.png" />
          <div class="name">关注</div>
        </div>

        <div class="icon" @click="goList(0)">
          <img src="../../assets/images/index/icon_5@2x.png" />
          <div class="name">更多</div>
        </div>
      </div>

      <div class="notice-box u-flex">
        <div class="icon">
          <img src="@/assets/images/index/font_zkx@2x.png" alt="" />
        </div>
        <van-notice-bar :scrollable="false" color="#66696E">
          <van-swipe
            vertical
            class="notice-swipe"
            :autoplay="5000"
            :show-indicators="false"
          >
            <van-swipe-item v-for="item in noticeList"
              >{{ item.name }}用户已完成接单</van-swipe-item
            >
          </van-swipe>
        </van-notice-bar>
      </div>

      <div class="nav-box" ref="nav">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-tabs
            v-model="active"
            :background="'rgba(255,255,255,' + opacity + ')'"
            @click="select"
            sticky
            :line-width="lineWidth"
          >
            <van-tab
              v-for="(item, index) in list"
              :title="item.name"
              :id="item.id"
            >
              <van-list
                id="list"
                v-model="loading"
                :finished="finished"
                @load="onLoad"
              >
                <van-cell
                  v-for="(itemChild, indexChild) in Alllists"
                  @click="godetail(itemChild.id)"
                >
                  <div class="cell u-flex-bet">
                    <div class="left u-flex">
                      <van-image
                        width="88rem"
                        height="88rem"
                        round
                        :src="itemChild.avatar ? itemChild.avatar : defaults"
                      />

                      <div class="info">
                        <div class="title">{{ itemChild.name }}</div>
                        <div class="num">
                          剩余数量:<span>{{ itemChild.accept_num }}</span
                          >/{{ itemChild.num }}
                        </div>
                      </div>
                    </div>

                    <div class="right u-flex">
                      <div class="price">+{{ itemChild.price }}</div>
                      <van-image
                        width="36rem"
                        height="36rem"
                        round
                        :src="require('@/assets/images/index/icon_coin@2x.png')"
                      />
                    </div>
                  </div>
                </van-cell>

                <div class="none" v-if="finished">没有更多了</div>
              </van-list>
            </van-tab>
          </van-tabs>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
import { JOB_GET, JOB_LIST, BANNER, NOTICE } from "@/api/api.js";

export default {
  name: "home",
  components: {},
  data() {
    return {
      active: 0,
      value: "",
      bannerList: [],
      noticeList: [],
      list: [],
      Alllists: [],
      curId: 0,
      // 下拉
      isLoading: true,
      loading: false,
      finished: false,
      time: 0,
      p: "",
      defaults: require("../.././assets/images/avator.png"),
      logosrc: require("../.././assets/logo.png"),
      lineWidth: "64rem",
      opacity: 0,
    };
  },

  mounted() {
    this.getKind();
    this.getAllList(0);
    this.getBanner();
    this.notice();
    window.addEventListener("scroll", this.handleScrollx, true);
  },
  methods: {
    select(param) {
      this.lineWidth = this.list[param].name.length * 32 + "rem";
      let id = this.list[param]["id"];
      this.getAllList(id);
      this.curId = id;
    },
    async getBanner() {
      const { data } = await this.$reqGet(BANNER, {});
      if (data.status == 1) {
        let banner = data.data.list;
        this.bannerList = banner;
      }
    },
    async notice() {
      const { data } = await this.$reqGet(NOTICE, {});
      if (data.status == 1) {
        let banner = data.data.list;
        this.noticeList = banner;
      }
    },
    async getKind() {
      const { data } = await this.$reqGet(JOB_GET, {});
      if (data.status == 1) {
        let list = JSON.parse(JSON.stringify(data.data));
        let arr = [{ id: 0, name: "全部" }];
        for (let i = 0; i < list.length; i++) {
          for (let j = 0; j < list[i].sublist.length; j++) {
            arr.push({
              id: list[i].sublist[j]["id"],
              name: list[i].sublist[j]["name"],
            });
          }
        }
        let a = JSON.parse(JSON.stringify(arr));
        this.list = a;
      }
    },
    async getAllList(id) {
      const { data } = await this.$reqGet(JOB_LIST, {
        category: id,
      });
      if (data.status == 1) {
        let list = data.data.list;
        let p = data.data.nextPage.value;
        this.p = p;
        this.Alllists = list;
        this.time = 1;
        this.loading = false;
        this.finished = false;
      }
    },
    async LoadList(p) {
      this.loading = true;
      if (p) {
        const { data } = await this.$reqGet(JOB_LIST, {
          category: this.curId,
          p: p,
        });
        if (data.status == 1) {
          let list = data.data.list;
          let p = data.data.nextPage.value ? data.data.nextPage.value : false;
          this.p = p;
          this.Alllists = this.Alllists.concat(list);
          this.loading = false;
        }
      } else {
        this.finished = true;
      }
    },
    onRefresh() {
      let id = this.curId;
      this.getAllList(id);
      let that = this;
      setTimeout(() => {
        that.isLoading = false;
        that.finished = false;
        that.loading = false;
      }, 1000);
      that.$nextTick(() => {
        document.querySelector("#list").scrollTop = 0;
      });
    },
    onLoad() {
      this.loading = false;
      if (this.time != 0) {
        let that = this;
        that.LoadList(that.p);
      }
    },
    justifyImgWidth(e) {
      console.log(e.currentTarget.clientWidth);
      this.Imgheight = e.currentTarget.clientWidth;
      // this.logoWidth = e.currentTarget.clientHeight * 2.75
    },
    search() {
      this.$router.push({ name: "taskHouseSearch" });
    },
    godetail(id) {
      let data = {
        id: id,
        type: "jd",
      };
      this.$router.push({ name: "taskDetail", query: data });
    },
    handleScrollx() {
      this.opacity = window.pageYOffset / 500;
    },
    goList(id) {
      this.$router.push("/taskHouseSearch?id=" + id);
    },
    // 选择分类
    // chooseKind(e) {
    // 	if (e == '3') {
    // 		this.$router.push({ name: 'areaSeckill' });
    // 	}
    // }
  },
};
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  background-color: #f5f5f5;

  .bg {
    position: fixed;
    left: 0;
    top: 0;
    height: 280rem;
    background: linear-gradient(180deg, #3b87f7 80%, #f5f5f5 100%);
  }

  .content {
    z-index: 99;
    background-color: #f5f5f5;

    .search-box {
      position: relative;
      height: 112rem;
      width: 100%;
      padding: 12rem 24rem;

      .logo {
        width: 164rem;
        height: 44rem;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .input-box {
        width: 500rem;
        height: 64rem;
        background-color: #fff;
        border-radius: 32rem;
        padding-left: 30rem;
        margin-left: 16rem;

        img {
          width: 28rem;
          height: 28rem;
        }

        .input {
          font-size: 28rem;
          color: #d1d1d1;
          margin-left: 16rem;
        }
      }
    }

    .banner-box {
      width: 100%;
      padding: 0 24rem;

      .swipe {
        img {
          width: 100%;
          height: 280rem;
        }
      }
    }

    .icon-box {
      position: relative;
      margin-top: 14rem;
      padding: 0 24rem;

      .icon {
        flex: 1;
        font-size: 24rem;
        color: #343434;

        img {
          width: 108rem;
          height: 108rem;
        }
      }
    }

    .notice-box {
      position: relative;
      height: 64rem;
      border-radius: 32rem;
      overflow: hidden;
      margin: 0 24rem;
      margin-top: 24rem;
      background-color: #fff;
      margin-bottom: 10rem;
      .icon {
        margin-left: 24rem;

        img {
          width: 90rem;
          height: 42rem;
        }
      }

      .van-notice-bar {
        width: 100%;
        height: 64rem;
        background-color: #fff;
        font-size: 24rem;
      }

      .notice-swipe {
        height: 64rem;
        line-height: 64rem;
      }
    }

    .nav-box {
      padding-bottom: 166rem;

      /deep/.van-tabs__nav {
        padding-left: 0;
        padding-right: 0;
      }
      /deep/ .van-tabs__line {
        height: 12rem;
        border-radius: 7rem;
        background-color: var(--theme);
        bottom: 54rem;
      }
      /deep/ .van-tab__text {
        z-index: 99;
      }
      /deep/ .van-tab {
        font-size: 28rem;
        color: #999;
      }
      /deep/.van-tab--active {
        font-size: 32rem;
        font-weight: bold;
        color: #343434;
      }

      #list {
        margin-top: 10rem;
        padding: 0 24rem;
      }

      .van-cell {
        background-color: #f5f5f5;
        padding: 28rem 24rem;
        background-color: #fff;
        margin-bottom: 24rem;
        border-radius: 20rem;
        text-align: left;
      }

      .cell {
        .left {
          .info {
            margin-left: 34rem;

            .title {
              margin-bottom: 12rem;
              font-size: 32rem;
              font-weight: bold;
            }

            .num {
              font-size: 28rem;
              color: #999;

              span {
                margin-left: 4rem;
                color: #ff4343;
              }
            }
          }
        }

        .right {
          .price {
            margin-right: 8rem;
            font-size: 36rem;
            color: #ff4343;
          }
        }
      }

      .none {
        color: #999;
        padding-bottom: 20rem;
      }
    }
  }
}
</style>
